<script setup lang='ts'>
import {ref, reactive, PropType, onBeforeMount} from 'vue'
import {FormRules, ElMessage} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import {KnowlegeFormInfor, saveKnowlegeInfor} from '@/api/physicalExaminationManager/physicalKnowlege'
import {DialogType, SeleteData} from '@/api/config'
import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import useStore from '@/store/common'
import {transfDicArrData, getObjectByKey} from '@/util/common'
//是否显示
const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  //弹窗类型
  dialogType:{
    type:String as PropType<DialogType>,
    required:true
  },
  //数据
  itemGroupFormData:{
    type:Object as PropType<KnowlegeFormInfor>,
    required:true
  }


})

const {store} = useStore.setup()

const emits = defineEmits(['close'])

//纳入异常统计
const isExceptionList:Array<SeleteData> = [{label:'是', value:true}, {label:'否', value:false}]

// 弹窗标题定义
const title = ref('')

// 弹窗标题设置
const initTitle = () => {
  if (props.dialogType === 'add') {
    title.value = '新增规则'
  }
  else if (props.dialogType === 'edit') {
    title.value = '编辑规则'
  }
}

//信息
const formData:KnowlegeFormInfor = reactive(props.itemGroupFormData)

// 显示加载状态
const showSaveLoading = ref(false)

// 表单规则
const rules = reactive<FormRules>({
  name:[
    {required:true, message: '请输入规则名称', trigger: ['change', 'blur']},
    {required:true, message:'长度应不超过50个字符', max:50, trigger: ['change', 'blur']}
  ],
  grouping:[
    {required:true, message: '请选择组别', trigger: ['change', 'blur']}
  ],
  remark:[
    {required:true, message: '请输入规则描述', trigger: ['change', 'blur']},
    {message:'长度应不超过200个字符', max:200, trigger: ['change', 'blur']}
    // {message:'应输入汉字、字母、数字、字符', pattern:Normal, trigger:['change', 'blur']}
  ],
  isException:[
    {required:true, message: '请选择是否纳入异常统计', trigger: ['change', 'blur']}
  ]
})

//表单项
const fromItems = ref<Array<FromItem>>([
  {label:'规则名称', placeholder:'请输入规则名称', prop:'name', type:'input' },
  {label:'组别', placeholder:'请选择组别', prop:'grouping', type:'selete', seleteData:[]},
  {label:'规则描述', placeholder:'请输入规则描述', prop:'remark', type:'input', inputType:'textarea' },
  {label:'纳入异常统计', placeholder:'是否纳入异常统计', prop:'isException', type:'selete', seleteData:isExceptionList }
])

//表单清除控制
const resetFieldsFlag = ref(false)

const validateFlag = ref(false)

// 确认按钮
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}

//关闭
const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//取消按钮
const onCancel = () => {
  onClose()
}

//表单验证通过事件
const onSubmit = () => {
  showSaveLoading.value = true
  saveKnowlegeInfor(formData).then(() => {
    showSaveLoading.value = false
    ElMessage.success('保存成功！')
    emits('close')
  }).catch((error) => {
    showSaveLoading.value = false
    console.warn(error)
  })
}

//获取字典
const getDic = () => {
  store.getDicData('grouping').then((res) => {
    const item = getObjectByKey(fromItems.value, 'prop', 'grouping')
    if (item && item.type === 'selete') {
      item.seleteData = transfDicArrData(res)
    }
  })

}

onBeforeMount(() => {
  getDic()
  initTitle()
})

</script>

<template>
  <d-dialog
    :title="title"
    custom-class="edit"
    width="600px"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      label-position="right"
      :label-width="130"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :rules="rules"
      method="post"
      :form-data="formData"
      :form-items="fromItems"
      :form-line-num="1"
      @submit="onSubmit"
    />
  </d-dialog>
</template>

<style scoped>
</style>